<!DOCTYPE html><!--用户修改密码-->
<html lang="en" xmlns:th="http://www.thymeleaf.org" class="x-admin-sm">
<head th:replace="common/amazingHeader2::amazing_header('修改密码')">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form" id="MyForm">
            <div class="layui-form-item">
                <label for="username" class="layui-form-label">
                    <span class="x-red">*</span>用户名
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="username" name="username" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red" id="nameMsg"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="question"><span class="x-red">*</span>密保问题</label>
                <div class="layui-input-inline" style="width: 14%">
                    <select id="question" class="layui-form-select" name="question">
                        <option value="你的家乡在哪?" id="q1">你的家乡在哪?</option>
                        <option value="你的小学叫什么?" id="q2">你的小学叫什么?</option>
                        <option value="你的小名叫什么?" id="q3">你的小名叫什么?</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="answer" class="layui-form-label">
                    <span class="x-red">*</span>答案
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="answer" name="answer" required=""
                           autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="password" class="layui-form-label">
                    <span class="x-red">*</span>新密码
                </label>
                <div class="layui-input-inline">
                    <input type="password" id="password" name="password" required="" lay-verify="pass"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red" id="passwordMsg">6到16个字符</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="rePass" class="layui-form-label">
                    <span class="x-red">*</span>确认密码
                </label>
                <div class="layui-input-inline">
                    <input type="password" id="rePass" name="rePass" required="" lay-verify="repass"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red" id="rePassMsg"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="hidden" id="id" name="id" required=""
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="padding-left: 150px">
                <button class="layui-btn" type="button" lay-submit="" onclick="changePsw()">
                    修改
                </button>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    function isNameExist() {
        const name = $('#username').val();
        let flag = true;
        $.ajax({
            type: 'GET',
            url: 'user/isNameExist',
            async: false,
            data: {
                'name': name
            },
            success: function (result) {
                const msg = $('#nameMsg');
                msg.text('');
                if (!result.data) {
                    msg.text('用户名不存在，请重新输入');
                    flag = false;
                } else {
                    flag = true;
                }
            }
        });
        return flag;
    }

    function changePsw() {
        if (!isNameExist() || !testAnswer() || !testPsw() || !testRePass()) {
            return false;
        }
        const formData = new FormData($('#MyForm')[0]);
        $.ajax({
            type: 'POST',
            url: 'user/changePsw',
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            success: function (result) {
                if (result.status === 0) {
                    layer.msg(result.msg, {time: 1500, icon: 5, shift: 6});
                } else {
                    layer.msg('修改成功！！！', {time: 1500, icon: 6, shift: 6});
                    setTimeout(xadmin.close, 1500);
                }
            }
        })
    }
</script>
<script>
    layui.use(['form', 'layer'],
        function () {
            let form = layui.form,
                layer = layui.layer;

        });
</script>
</html>